<template>
  <div class="page ">
    <div class="page-item">
        <div class="page-title"> uploadimage 功能验证：</div>
        <div class="page-flex">
            <label>disabled功能验证：</label>
            <ekRadio v-model="fromtest.disabled" :options="[
            {
                value: true,
                label: '启用',
            },
            {
                value: false,
                label: '禁用',
            }
            ]"
            @change="changeRadio"
            />
      </div>
       <div class="page-flex">
        <label>autoUpload功能验证：</label>
         <ekRadio v-model="fromtest.autoUpload" :options="[
           {
            value: true,
            label: '启用',
          },
          {
            value: false,
            label: '禁用',
          }
        ]" />
         <el-button  @click="testupload()" class="mt-btn">上传</el-button>
      </div>
      <div class="page-flex">
            <label>multiple功能验证：</label>
            <ekRadio v-model="fromtest.multiple" :options="[
            {
                value: true,
                label: '启用',
            },
            {
                value: false,
                label: '禁用',
            }
            ]"
            @change="changeRadio"
            />
      </div>
      <div class="page-flex">
            <label>accept功能验证：</label>
            <ekInput v-model="fromtest.accept" />
      </div>
      <div class="page-flex">
            <label>limit功能验证：</label>
            <el-input-number v-model="fromtest.limit" />
      </div>
      <div class="page-flex">
            <label>size功能验证：</label>
            <el-input-number v-model="fromtest.size" />
      </div>
      <div class="page-flex mt-btn">
        <label>success功能验证：{{ fromtest.success }}</label>
      </div>
    <div class="page-flex">
            <label>测试网络差环境下情况：</label>
            <el-button  @click="testne()" class="mt-btn">测试</el-button>
      </div>

    </div>
    <div class="page-item">
        <div>
            <ekUploadImage 
                ref="uploads"
                v-if="show"
                v-model="form.input" 
                :disabled="fromtest.disabled" 
                action="http://temp.demo.top/admin/upload/upload"
                :multiple="fromtest.multiple"
                :accept="fromtest.accept"
                :limit="fromtest.limit"
                :size="fromtest.size"
                :autoUpload="fromtest.autoUpload"
                :headers="fromtest.headers"
                @on-success="success"
            
            />
        </div>
       
        <formRender :form="form" :columns="columns" ref="forms"

        />
        <el-button  @click="test" class="mt-btn">测试</el-button>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, getCurrentInstance, reactive, ref} from "vue";
import formRender from "@/components/form/formRender.vue";
import ekRadio from "@/components/form/ekRadio/index.vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekSelect from "@/components/form/ekSelect/index.vue";
import ekUploadImage from "@/components/form/ekUploadImage/index.vue";
import { getToken } from '@/utils/sys';

let fromtest = ref( {
  disabled: false,
  autoUpload:true,
  multiple: false,
  accept: 'image/png,image/jpg,image/jpeg,image/gif,image/bmp',
  limit: 0,
  size: 0,
  headers: {},
  success: '',
})
 fromtest.value.headers = {
  Authorization: getToken()
 }
let form = reactive({
  input: '',
  input2: JSON.stringify([
    {
        path: "files/20231012\\427fafbc58c6574e2d75912477a24550.json",
        url: "files/20231012\\427fafbc58c6574e2d75912477a24550.json",
        size: 678,
        name: "_API_MDFP_API_SYS_OPEN_BILL_DETAIL_OUT.json",
        mime: "application/json"
    },
    {
        path: "files/20231012\\c37eda803696a03cf0213abca892eb2d.js",
        url: "files/20231012\\c37eda803696a03cf0213abca892eb2d.js",
        size: 6847,
        name: "bad.js",
        mime: "text/plain"
    }
  ]),
  input3: ""
});

let columns = ref([
  {
    type: "UploadFile",
    column: "input2",
    label: "uploadfile",
    rules: [{ required: true, message: "请选择文件", trigger: "change" }],
    action:"http://temp.demo.top/admin/upload/upload",
    headers: {
      Authorization: getToken()
    }
  },
]);
const forms = ref(null)
const test = () => {
    console.log(form)
    forms.value.validate(()=>{

    });
};
const uploads = ref(null);
const testupload = () =>{
    uploads.value.submit()
}

const options = ref([
    {
        value: 'success',
        label: '选项1',
    },
    {
        value: 'fail',
        label: '选项2',
    },
    {
        value: 'error',
        label: '选项3',
    }
])
const testData = (type) =>{
    if(type == 2){
        options.value= [
            {
                value: 'success',
                label: 'success',
            },
            {
                value: 'fail',
                label: 'fail',
            },
            {
                value: 'error',
                label: 'error',
            }
        ]
    } else if(type ==3) {
        options.value= [
            {
                value: '1',
                label: '1',
            },
            {
                value: '2',
                label: '2',
            },
            {
                value: '3',
                label: '3',
            }
        ]
    } else {
         options.value= [];
    }
}

const changeRadio = () =>{
    columns.value[0].disabled = fromtest.value.disabled
}
const success = (response, uploadFile, uploadFiles) => {
    fromtest.value.success = 'success:' ;
  console.log(response, uploadFile, uploadFiles, 'success')
};


const show = ref(true);
const testne = () =>{
    show.value = false;
    setTimeout(()=>{
        show.value = true;
    }, 1000)
}
</script>

<style scoped lang="scss">
.page {
  background-color: #f4f4f4;
  display: flex;
    .page-item {
        border: 1px solid #fff;
        padding: 10px;
            margin: 10px;
    }
  .page-title {
    font-size: 16px;
  }
  .page-flex {
    display: flex;
    align-items: center;
  }
  .mt-btn {
    margin-top: 10px;
  }
}
</style>
